<style lang="less" scoped>
</style>

<template>
    <div>
        <Row>
            <Col span="24">
                <Card>
                    <p slot="title" style="height: 32px">
                        <Button type="primary" @click="alertAdd" icon="md-add">新增</Button>
                    </p>
                    <div>
                        <Table :loading="tabLoading" :columns="columnsList" :data="tableData" border disabled-hover>
                            <template slot-scope="{ row, index }" slot="handle">
                                <Button type="primary" size="small" style="margin-right: 5px"
                                        @click="editShow(row,index)">编辑
                                </Button>
                                <Poptip word-wrap  confirm transfer title="您确定要删除这条数据吗?" @on-ok="Del(row,index)">
                                    <Button type="error" size="small" :loading="row.loading">
                                        <span v-if="!row.loading">删除</span>
                                        <span v-else>删除</span>
                                    </Button>
                                </Poptip>
                            </template>
                        </Table>
                    </div>
                </Card>
            </Col>
        </Row>
        <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel">
            <p slot="header" style="color:#2d8cf0">
                <Icon type="md-alert"/>
                <span>{{formItem.id ? '编辑' : '新增'}}菜单</span>
            </p>
            <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
                <FormItem label="菜单名称" prop="name">
                    <Input v-model="formItem.name" placeholder="请输入菜单名称"></Input>
                </FormItem>
                <FormItem label="父级菜单" prop="fid">
                    <Select v-model="formItem.fid" filterable>
                        <Option :value="0">顶级菜单</Option>
                        <Option v-for="item in tableData" :value="item.id" :key="item.id">{{ item.showName }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="菜单URL" prop="url">
                    <Input v-model="formItem.url" placeholder="请输入菜单URL">
                        <span slot="prepend">admin/</span>
                    </Input>
                </FormItem>
                <FormItem label="菜单排序" prop="sort">
                    <InputNumber :min="0" v-model="formItem.sort"></InputNumber>
                    <Tag color="error" class="margin-left-5">数字越小越靠前</Tag>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
                <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {getList, changeStatus, add, edit, del} from '@/api/menu'

    export default {
        name: 'system_menu',
        data() {
            return {
                columnsList: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 65,
                        align: 'center'
                    },
                    {
                        title: '菜单名称',
                        align: 'left',
                        key: 'showName'
                    },
                    {
                        title: '排序',
                        align: 'center',
                        key: 'sort',
                        width: 130
                    },
                    {
                        title: '菜单URL',
                        align: 'left',
                        key: 'url',
                        width: 250
                    },
                    /*{
                      title: '状态',
                      align: 'center',
                      key: 'hide',
                      width: 100,
                      render: (h, params) => {
                        let vm = this
                        return h('i-switch', {
                          attrs: {
                            size: 'large'
                          },
                          props: {
                            'true-value': 1,
                            'false-value': 0,
                            value: params.row.hide
                          },
                          on: {
                            'on-change': function (status) {
                              changeStatus(status, params.row.id).then(response => {
                                vm.$Message.success(response.data.msg)
                                vm.getList()
                              })
                            }
                          }
                        }, [
                          h('span', {
                            slot: 'open'
                          }, vm.$t('hide_choose')),
                          h('span', {
                            slot: 'close'
                          }, vm.$t('show_choose'))
                        ])
                      }
                    },*/
                    {
                        title: '操作',
                        align: 'center',
                        slot: 'handle',
                        width: 200,
                        /*render: (h, params) => {
                          return h('div', [
                            editButton(this, h, params.row, params.index),
                            deleteButton(this, h, params.row, params.index)
                          ])
                        }*/
                    }
                ],
                tableData: [],
                modalSetting: {
                    show: false,
                    loading: false,
                    index: 0
                },
                formItem: {
                    name: '',
                    fid: 0,
                    url: '',
                    sort: 0,
                    id: 0
                },
                ruleValidate: {
                    name: [
                        {required: true, message: '菜单名称不能为空', trigger: 'blur'}
                    ]
                },
                tabLoading: false // 加载表格数据
            }
        },
        created() {
            this.getList()
        },
        methods: {
            alertAdd() {
                this.modalSetting.show = true
            },
            // 显示编辑model
            editShow(row, index) {
                let rows = JSON.parse(JSON.stringify(row))
                rows.url = rows.url.slice(6)
                this.formItem = rows
                this.modalSetting.show = true
                this.modalSetting.index = index
            },
            submit() {
                let vm = this
                this.$refs['myForm'].validate((valid) => {
                    if (valid) {
                        vm.modalSetting.loading = true
                        if (vm.formItem.id === 0) {
                            add(vm.formItem).then(response => {
                                vm.$Message.success(response.data.msg)
                                vm.getList()
                                vm.cancel()
                            }).catch(() => {
                                vm.modalSetting.loading = false
                            })
                        } else {
                            edit(vm.formItem).then(response => {
                                vm.$Message.success(response.data.msg)
                                vm.getList()
                                vm.cancel()
                            }).catch(() => {
                                vm.modalSetting.loading = false
                            })
                        }
                    }
                })
            },
            cancel() {
                this.modalSetting.show = false
            },
            doCancel(data) {
                if (!data) {
                    this.formItem.id = 0
                    this.$refs['myForm'].resetFields()
                    this.modalSetting.loading = false
                    this.modalSetting.index = 0
                }
            },
            getList() {
                this.tabLoading = true
                getList().then(response => {
                    this.tabLoading = false
                    for(let v of response.data.data.list) {
                        v.loading = false
                    }
                    this.tableData = response.data.data.list
                })
            },
            Del(row,index) {
                row.loading = true
                del(row.id).then(response => {
                    row.loading = false
                    this.tableData.splice(index, 1)
                    this.$Message.success(response.data.msg)
                }).catch((err) => {
                    console.log(err)
                    row.loading = false
                })
            }
        }
    }
</script>
